<template>
  <swiper
    class="swiper-style"
    previous-margin="80rpx"
    next-margin="80rpx"
    :circular="false"
    :indicator-dots="!!(list?.length && list.length > 1)"
    indicator-active-color="#2878FF"
    @change="handleSwiperChange"
  >
    <template v-for="(item, index) in 2" :key="index">
      <swiper-item>
        <view
          class="hb-mx-auto hb-bg-white hb-px-2.5 hb-pt-2.5 hb-rounded-md"
          :style="{ width: width + 'rpx' }"
        >
          <view class="hb-flex hb-flex-col mb-8">
            <!-- <TImage :src="globalConfig?.logo" width="40rpx" height="40rpx" /> -->
            <TmImage
              src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/wechat-share-icon.png"
              :width="40"
              :height="40"
            />
            <text class="hb-ml-1 hb-text-xs">{{ '名字' }}</text>
          </view>
          <view class="text-overflow-2 hb-mb-2 hb-text-base">
            <text>{{ '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题' }}</text>
          </view>
          <TmImage
            class="hb-mb-2"
            src="https://s3-alpha-sig.figma.com/img/380a/b1ff/736fec24f3d66e0eb413445ca2fc0bc3?Expires=1741564800&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=F6F1LOTPKKnyq8XgnZlBQF4kIWtftploYnSkUJaPgOOb4ZOB0i0uhIWOCEeUNZCPCI64qurow5b2rSRhTAdmCF8jbWTgtHQNQ8vT~iISbG2PCSZXoBw3PP4mhoAXWH5UuMcmx4hHY2f0zq1Kt8Acrn2Z6QI8f1pI~3RJCiGncjFIUVXrh8WxfGEfUGBQ6kMixkwkiw2vpfrKydmFm5yG32~48l8FUmvVtXhSDM6-Wm0I8E1R9srDmol9wLWT7sjlO71P6Wxk11eseKs4ly5mPy0HPQjYVj-B2r5-I-Y-wfKSK5Cw-9Xa0gC6rWNhigf9phkTXP6JrNgHcj0y339ohg__"
            :width="width"
            :height="384"
          />
          <view
            class="hb-text-[#646566] hb-border-t-1 hb-border-[#ebedf0] hb-flex hb-items-center hb-py-1"
          >
            <text class="hb-text-[#2878ff] hb-text-xs">&#xe6bc;</text>
            <text class="hb-text-[20rpx] hb-ml-1">小程序</text>
          </view>
        </view>
      </swiper-item>
    </template>
  </swiper>
  <view class="hb-flex hb-items-center hb-justify-center">
    <TmButton label="立即分享" open-type="share" :width="216" :height="64" />
  </view>
  <!-- <view class="disFlxCC mt-24">
    <TButton
      text="立即分享"
      type="primary"
      class="gutter-btn"
      open-type="share"
      :id="ShareButtonId.CUSTOMSHARE_BUTTON_ID"
      :icon="'\ue6b9'"
      :custom-style="{
        display: 'inline-block',
      }"
      custom-class="h-32 linh-32 br-16 px-12"
    /> -->
  <!-- </view> -->
</template>

<script setup lang="ts">
  import { useAppStore } from '@/store/modules/app';
  import TImage from '@/components/TImage/index.vue';
  import type { PropType } from 'vue';
  // import type { ReturnWxShareOptions } from '../types';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { propTypes } from '@/utils/propTypes';
  // import { ShareButtonId } from '@/enums/shareEnum';

  // const { globalConfig } = useAppStore();

  const width = 480;

  defineProps({
    modelValue: propTypes.number.def(0),
    list: Array as PropType<Array<any>>,
  });

  const emits = defineEmits(['update:modelValue']);

  function handleSwiperChange(e: { detail: { current: number } }) {
    emits('update:modelValue', e.detail.current);
  }
</script>

<style lang="scss" scoped>
  .swiper-style {
    width: 100vw;
    height: 700rpx;
    margin-top: -100rpx;
  }
</style>
